<template>
  <div class="page-login">
    <div class="login-blur-bg"></div>
    <div class="login-blur-bg"></div>
    <div class="login-blur-bg"></div>
    <div class="login-wrapper">
      <!-- 背景圆 -->
      <div class="login-ornament"></div>
      <div class="login-ornament"></div>
      <div class="login-ornament"></div>
      <div class="login-ornament"></div>
      <div class="login-ornament"></div>
      <div
        :class="{
          'login-container': true,
          loading: loading,
        }"
      >
        <h2>管理系统登录</h2>
        <nt-form
          :model="formFields"
          :rules="rules"
          class="login-form"
          @submit="handleSubmit"
        >
          <nt-form-item name="username" class="form-row">
            <nt-input
              placeholder="请输入用户名"
              v-model="formFields.username"
            ></nt-input>
          </nt-form-item>
          <nt-form-item name="password" class="form-row">
            <nt-input
              placeholder="请输入密码"
              v-model="formFields.password"
            ></nt-input>
          </nt-form-item>
          <nt-form-item class="form-row">
            <nt-button html-type="submit" type="primary" block>提交</nt-button>
          </nt-form-item>
        </nt-form>
        <div class="regist-btn-wrapper">
          <a href="#" class="regist-btn">忘记密码</a>
          <a href="#" class="regist-btn">前往注册</a>
        </div>
        <div class="login-loading" v-if="loading"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
document.title = "登录";

const loading = ref(false);

const formFields = ref({
  username: "",
  password: "",
});
const rules = [
  {
    key: "username",
    rules: ["required"],
    message: "用户名不能为空",
  },
  {
    key: "password",
    rules: [/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,15})$/],
    message: "密码为6~15位字母+数字",
  },
];

function handleSubmit() {
  console.log(formFields.value);
}
</script>

<style lang="less">
.page-login {
  position: relative;
  height: 100vh;
  background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-blur-bg {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
  }
  .login-blur-bg:nth-child(1) {
    width: 100%;
    height: 50%;
    top: 0;
    background: #ff359b;
  }
  .login-blur-bg:nth-child(2) {
    bottom: 0;
    left: 0;
    top: 200px;
    width: 50%;
    background: #fffd87;
  }
  .login-blur-bg:nth-child(3) {
    bottom: 0;
    right: 0;
    width: 50%;
    top: 200px;
    background: #00d2ff;
  }
  .login-wrapper {
    position: relative;
  }
  .login-ornament,
  .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: loginOrnamentAnim 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--d, 0) * -1s);
  }
  .login-ornament:nth-child(1) {
    --d: 0;
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
  }
  .login-ornament:nth-child(2) {
    --d: 1;
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
  }
  .login-ornament:nth-child(3) {
    --d: 2;
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
  }
  .login-ornament:nth-child(4) {
    --d: 3;
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
  }
  .login-ornament:nth-child(5) {
    --d: 4;
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
  }

  .login-container {
    --w: 400px;
    --h: 400px;
    position: relative;
    width: var(--w);
    height: var(--h);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 5;
    padding: 50px;
    box-sizing: border-box;
    border-radius: 5px;
  }

  .login-container.loading::after {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
    position: absolute;
  }

  h2 {
    position: relative;
    margin: auto;
    font-size: 24px;
    line-height: 1;
    color: var(--nt-primary-color, #00d2ff);
    margin-bottom: 50px;
    text-align: center;
  }

  .login-input {
    --el-input-focus-border-color: #00d2ff;
    .el-input__wrapper {
      border-radius: 20px;
    }
  }
  .form-row {
    margin-bottom: 0;
  }
  .form-row:not(:first-child) {
    margin-top: 30px;
  }

  .login-btn {
    width: 100%;
    color: #ffffff;
    border-radius: 20px;
  }

  .regist-btn-wrapper {
    margin-top: 5px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .regist-btn {
    color: var(--nt-primary-color, #00d2ff);
  }

  /** 加载框 */
  .login-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #1890ff;
    animation: borderAroundAnim 5s infinite linear;
  }

  .login-form {
    --nt-form-edit-height: 40px;
  }
}

@media screen and (max-width: 768px) {
  .page-login {
    .login-container {
      --w: 330px;
      padding: 50px 20px;
    }
  }
}
@keyframes borderAroundAnim {
  0%,
  100% {
    clip: rect(0 var(--w) 2px 0);
  }
  25% {
    clip: rect(0 var(--w) var(--h) calc(var(--w) - 2px));
  }
  50% {
    clip: rect(calc(var(--h) - 2px) var(--w) var(--h) 0);
  }
  75% {
    clip: rect(0 2px var(--h) 0);
  }
}
/* 背景圆动画 */
@keyframes loginOrnamentAnim {
  0%,
  100% {
    transform: translate3d(0, -50px, 0);
  }
  50% {
    transform: translate3d(0, 50px, 0);
  }
}
</style>
